<template>
    <div class="pwform">
        <el-text class="mx-1" type="info" style="margin-bottom: 20px"
            >密码中必须包含大小字母、数字、特称字符，至少8个字符，最多30个字符。</el-text
        >
        <el-form
            ref="formRef"
            :label-position="'left'"
            label-width="100px"
            :model="formData"
            style="max-width: 460px"
            :rules="rules"
        >
            <el-form-item
                prop="oldpw"
                label="旧密码"
            >
                <el-input
                    v-model="formData.oldpw"
                    type="password"
                    show-password
                />
            </el-form-item>
            <el-form-item
                prop="newpw"
                label="新密码"
            >
                <el-input
                    v-model="formData.newpw"
                    type="password"
                    show-password
                />
            </el-form-item>
            <el-form-item
                prop="confirmpw"
                label="确认密码"
            >
                <el-input
                    v-model="formData.confirmpw"
                    type="password"
                    show-password
                />
            </el-form-item>
        </el-form>
        <el-button @click="onSave" size="default" type="primary"
            >提交</el-button
        >
    </div>
</template>
<script setup lang="ts" name="Pw">
import { ref, reactive } from 'vue';
import { useRouter, Router } from 'vue-router';
import { FormInstance, ElMessage, FormRules } from 'element-plus';
import { Md5 } from 'ts-md5';
import type { ValidateFieldsError } from 'async-validator';

import { useSysStore } from '@/store/sys';
import { Request } from '@/app/request';
/*
 * @Description:
 * @Author: zht
 * @Date: 2023-03-17
 * @LastEditTime: 2023-03-17
 * @LastEditors: zht
 * 佛祖保佑      永无BUG
 */
type changepw = {
    oldpw?: string;
    newpw?: string;
    confirmpw?: string;
};
const formRef = ref<FormInstance>();
const formData = reactive<changepw>({});
const sysStore = useSysStore();
const router: Router = useRouter();
const validatePass = (_rule: any, value: any, callback: any) => {
    // 密码中必须包含大小字母、数字、特称字符，至少8个字符，最多30个字符。
    const regex = new RegExp(
        '(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,30}',
    );
    if (!regex.test(value)) {
        callback(new Error('密码强度不符合要求'));
    }
    callback();
};
const rules = reactive<FormRules<typeof formData>>({
    oldpw: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
    newpw: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { validator: validatePass, trigger: 'blur' },
    ],
    confirmpw: [
        { required: true, message: '请输入确认密码', trigger: 'blur' },
        { validator: validatePass, trigger: 'blur' },
    ],
});
const onSave = async () => {
    const formValid = await formRef.value?.validate(
        (isValid: boolean, _invalidFields?: ValidateFieldsError) => {
            // return isValid;
        },
    );
    if (formValid) {
        // 发送修改请求
        if (formData.newpw === formData.oldpw) {
            ElMessage({type: 'error', message: '新密码不能与旧密码相同'});
            return;
        }
        if (formData.newpw !== formData.confirmpw) {
            ElMessage({type: 'error', message: '新密码与确认密码不符'});
            return;
        }
        const oldPw = Md5.hashStr(
            (formData.oldpw as string) + '8',
        ) as string;
        const newPw = Md5.hashStr(
            (formData.newpw as string) + '8',
        ) as string;
        const req = new Request('修改密码', {
            oper: sysStore.oper?.name as string,
            oldPw,
            newPw,
        });
        const r = await req.post();
        if (r.code > 100) {
            ElMessage.success(`${r.msg},请重新登录`);
            sysStore.oper.id = 0;
            sysStore.oper.name = '';
            sysStore.oper.pwflag = false;
            router.push({
                name: 'login',
            });
        } else {
            ElMessage.error(r.msg);
        }
    } else {
        ElMessage.error('存在非法数据');
    }
};
</script>
<style lang="scss" scoped>
.pwform {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: 10%;
}
</style>
